<template>
  <!--  页面主导航条 位于 页面最顶层 最顶层  -->
  <div id="mainNav">
    <div id="leftNav">
      <!--      <div class="menuBut" v-show="userInfo.token!==''" >
            </div>-->
    </div>
    <div id="rightNav">
      <div class="user-info" v-show="user.userInfo.token!==''">
        <div class="userMenu">
          <el-dropdown trigger="hover" :hide-on-click="true">
            <div class="userMenuItem">
              <div id="user-image">
                <el-avatar size="small"
                           :src="user.GetHeadImg"
                />
              </div>
              <div id="user-name">
                <span> {{ user.userInfo.user.name }}</span>
              </div>
              <div id="user-menu">
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item icon="User" @click="gotoUser">个人中心</el-dropdown-item>
                <el-dropdown-item icon="SwitchButton" @click="loginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="org-role" v-show="user.userInfo.org>=1">
          <el-select v-model="org" size="small" @change="selectOrg">
            <el-option v-for="(org,index) in user.userInfo.orgs"
                       :key="index"
                       :label="org.name"
                       :value="org.orgId"
            />
          </el-select>
        </div>
        <div class="org-role" v-show="user.userInfo.org>=1">
          <el-select v-model="role" size="small" @change="selectRole">
            <el-option v-for="(role,index) in user.userInfo.orgRole"
                       :key="index"
                       :label="role.name"
                       :value="role.role_id"
            />
          </el-select>
        </div>
        <div>
          <el-tooltip placement="bottom" content="系统设置"
                      :show-arrow="false"
                      offset="0"
                      :enterable="false"
          >
            <el-button
                link icon="Setting"
                @click="OpenSetting"
                class="nav-but"
                :color="theme.color.Setting"
            />
          </el-tooltip>
        </div>
        <div>
          <el-tooltip placement="bottom" :content="fullMessage"
                      :show-arrow="false"
                      offset="0"
                      :enterable="false"
          >
            <el-button link
                       :color="theme.color.Full"
                       icon="FullScreen"
                       @click="SetFullScreen"
                       class="nav-but"/>
          </el-tooltip>
        </div>
      </div>
    </div>
    <Setting
        v-model="set"
        draggable
        :close-on-click-modal="false"
    >
      <template #footer>
        <div>
          <el-button type="primary" @click="Ok">确认</el-button>
          <el-button @click="Close">取消</el-button>
          <el-button disabled @click="Apply">保存</el-button>
        </div>
      </template>
    </Setting>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {userStore} from "../../../../store/user";
import {useThemeStore} from "../../../../store/theme";
import {onMounted, onUnmounted, ref} from "vue";
import Axios from "../../../../plugins/axios";
import {useWindowsStore} from "../../../../store/windows";
import {type} from "../../../../model/type";
import screenfull from 'screenfull'
import Setting from "../../setting/Setting.vue";
import event from "../../../../plugins/event";
import {QuitOrg, UpdateOrgAndRoleEvent, UpdateUserInfo} from "../../../../plugins/evenKey";
import {sys} from "../../../../model/system";

const router = useRouter()
const user = userStore()
const theme = useThemeStore()
const label = useWindowsStore()

const org = ref(user.userInfo.org)
const role = ref(user.userInfo.role)
const imgUrl = ref()

if (user.userInfo.token != '') {
  imgUrl.value = user.userInfo.user.picture
}


function gotoUser() {
  router.push('/index/menu/userPage')
  let win = new type.WindowLabel('/index/menu/userPage', '个人中心', 0, true)
  label.UpdateWindow(win)
}

function loginOut() {
  user.userInfo.user = {}
  user.userInfo.token = ''
  user.UpdateToken(user.userInfo)
  // 关闭所以打开标签
  label.closeAll()
  router.push('/')
}

const fullMessage = ref('全屏')
const fullFlag = ref(false)
const SetFullScreen = () => {
  //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏
  if (!screenfull.isEnabled) {
    return false
  }
  fullFlag.value = !fullFlag.value
  if (fullFlag.value) {
    fullMessage.value = '退出全屏'
  } else {
    fullMessage.value = '全屏'
  }
  //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
  screenfull.toggle()
}


function selectOrg(id: number) {
  let info = user.userInfo
  Axios.get("/api/default/our", {
    params: {
      org: id
    }
  }).then(response => {
    let data = response.data
    if (data.code === "0000") {
      info.orgRole = []
      // 初始化组织可选的角色
      info.roles.forEach(element => {
        if (element.org_id == id) {
          info.orgRole.push(element)
        }
      })
      user.UpdateOrgAndRole(id, data.data)
      event.emit(UpdateOrgAndRoleEvent)
      role.value = data.data
    }
  })
}

function selectRole(id: number) {
  user.UpdateOrgAndRole(org.value, id)
  event.emit(UpdateOrgAndRoleEvent)
}

const set = ref(false)

function OpenSetting() {
  set.value = !set.value
}

function Ok() {
  set.value = !set.value
}

function Close() {
  set.value = !set.value
}

function Apply() {
  set.value = !set.value
}


function init() {
  Axios.get('/api/user/info').then(
      response => {
        let data: sys.Result<any> = response.data
        if (data.code === '0000') {
          let token: type.Token = {...user.userInfo}
          token.orgs = data.data.orgs
          token.roles = data.data.roles
          token.user = {...data.data.user}
          token.role = token.user.roleId as number
          token.org = token.user.orgId as number

          user.UpdateToken(token)
          let info = user.userInfo
          info.orgRole = []
          if (user.userInfo.orgs === null && user.userInfo.roles == null) {
            user.userInfo.orgs = []
            user.userInfo.roles = []
            return
          }
          // 初始化组织可选的角色
          info.roles.forEach(element => {
            if (element.org_id == info.org) {
              info.orgRole.push(element)
            }
          })

          info.orgs.forEach(element => {
            if (element.orgId == info.org) {
              org.value = element.orgId
            }
          })
          info.roles.forEach(element => {
            if (element.role_id == info.role) {
              role.value = element.role_id
            }
          })
          // 更新当前选中组织及其角色
          org.value = token.org
          role.value = token.role
          event.emit(QuitOrg)
        }
      }
  )
}

onMounted(init)
event.on(UpdateUserInfo, init)
onUnmounted(() => {
  event.off(UpdateUserInfo, init)
})
</script>

<style scoped>
#mainNav {
  /*  width: 100%;*/
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: v-bind('theme.color.Nav');
}


#leftNav, #rightNav {
  width: 50%;
  height: 100%;
}

#leftNav {
  display: flex;
  flex-direction: row;
}

#rightNav {
  display: flex;
  flex-direction: row-reverse;
}

.userMenu {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.userMenuItem {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.userMenuItem > div {
  margin-right: 5px;
}

#user-name, #user-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.userMenuItem:hover {
  cursor: pointer;
  border-radius: 2px;
}

.user-info {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.user-info > div {
  margin: auto;
}

.org-role {
  min-width: 100px;
}

.nav-but {
  background-color: transparent;
}

</style>

<style>
.user-info > .org-role > .el-select > .select-trigger > .el-input > .el-input__wrapper {
  background-color: transparent;
  border-color: transparent;
}

.user-info > .org-role > .el-select > .select-trigger {
  border-style: none;
  border-color: transparent;
}

</style>
